<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUserStore } from "@/store";
import { computed } from "vue";

const router = useRouter();
const userStore = useUserStore();

const userName = computed(() => userStore.getName);

/**
 * 跳转至个人信息页面的handler函数
 */
const handlerToMinePage = () => {
  router.push("/mine");
};
</script>

<template>
  <div id="header-bar-container">
    <h1 id="system-title" style="font-size: 2.5em">
      城市排水管网完整性与溢流风险评估系统
    </h1>
    <div id="user-name" class="top-bar-message">
      <div class="user-name" @click="handlerToMinePage">
        {{ userName || "游客" }}
      </div>
      <div>，欢迎使用本系统！</div>
    </div>
  </div>
</template>

<style scoped>
#system-title {
  text-align: center;
}

#user-name {
  text-align: right;
}

#header-bar-container {
  border-bottom: 1px solid #333; /* 设置下边框为2px宽度的实线，颜色为#333 */
  margin-bottom: 10px; /* 添加一定的下边距以显示边缘线 */
}

.user-name {
  color: blue;
}

.top-bar-message {
  display: flex;
  justify-content: flex-end;
}
</style>
